//==============请求数据并渲染==============
const layer = layui.layer
const form = layui.form
getAddStr()
function getAddStr() {
  axios.get('/my/article/cates').then(({ data: { data, status, message, Id } }) => {
    //console.log(res);
    if (status !== 0) {
      return layer.msg(message)
    }
    let htmlStr = data.map((item) => {
      return ` <tr>
            <td>${item.name}</td>
            <td>${item.alias}</td>
            <td>
              <button type="button" class="layui-btn layui-btn-xs btn_edit" data-id="${Id}">编辑</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-danger btn_delete"  data-id="${Id}">删除</button>
            </td>
          </tr>`
    }).join('')
    $('#tbody').html(htmlStr)
  })
}
// axios.get('/my/article/cates').then(({ data: { data, status, message } }) => {
//   //console.log(res);
//   if (status !== 0) {
//     return layer.msg(message)
//   }
//   let htmlStr = data.map((item) => {
//     return ` <tr>
//             <td>${item.name}</td>
//             <td>${item.alias}</td>
//             <td>
//               <button type="button" class="layui-btn layui-btn-xs btn_edit">编辑</button>
//               <button type="button" class="layui-btn layui-btn-xs layui-btn-danger btn_delete">删除</button>
//             </td>
//           </tr>`
//   }).join('')
//   $('#tbody').html(htmlStr)
// })

//=============添加类别功能===============
let indexAddStr
let AddStr = ` <form id="addForm" class="layui-form">
        <!-- 第一行 分类名称 -->
        <div class="layui-form-item">
          <label class="layui-form-label">分类名称</label>
          <div class="layui-input-block">
            <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <!-- 第二行 分类别名  -->
        <div class="layui-form-item">
          <label class="layui-form-label">分类别名</label>
          <div class="layui-input-block">
            <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <!-- 第三行 按钮 -->
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          </div>
        </div>
      </form>
`
$('#btnAddCate').on('click', function () {
  indexAddStr = layer.open({
    content: AddStr,
    type: 1,//页面层
    title: '添加文章类别',
    area: ['500px', '260px']//宽，高

  });
  //拿到的index是一个重要的凭据，它是诸如layer.close(index)等方法的必传参数。
})


//提交==》触发表单的submit事件，由于表单是动态创建的，所以用事件委托
$('body').on('submit', '#addForm', function (e) {
  e.preventDefault()
  let data = $(this).serialize()
  axios.post('/my/article/addcates', data).then(({ data: { status, message } }) => {
    if (status !== 0) {
      return layer.msg(message)
    }
    layer.close(indexAddStr)//根据索引关闭弹框
    getAddStr()//添加后重新调用函数渲染页面
    layer.msg(message)

  })


})


let indexEditForm
let EditForm = ` <form  id="editForm" class="layui-form" lay-filter="editForm">
       <!--  存Id并隐藏 -->
        <div class="layui-form-item layui-hide">
          <label class="layui-form-label">分类名称Id</label>
          <div class="layui-input-block">
            <input type="text" name="Id" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
              class="layui-input">
          </div>
        </div>
<!-- 第一行 分类名称 -->
        <div class="layui-form-item">
          <label class="layui-form-label">分类名称</label>
          <div class="layui-input-block">
            <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <!-- 第二行 分类别名  -->
        <div class="layui-form-item">
          <label class="layui-form-label">分类别名</label>
          <div class="layui-input-block">
            <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <!-- 第三行 按钮 -->
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
          </div>
        </div>
      </form>`

$('#tbody').on('click', '.btn_edit', function () {
  const Id = $(this).attr('data-id')
  //console.log(11);
  axios.get('/my/article/cates/' + Id).then(({ data: res }) => {
    console.log(res);
    //填充表单数据
    // formTest 即 class="layui-form”所在元素属性 Lay-filter="” 对应的值
    form.val('editForm', res.data)
    //console.log(res.data);
  })


  //编辑弹出框
  indexEditForm = layer.open({
    content: EditForm,//内容
    type: 1,//页面层
    title: '修改文章类别',//标题
    area: ['500px', '260px']//宽，高

  })
  //拿到的index是一个重要的凭据，它是诸如layer.close(index)等方法的必传参数。
})
//更新功能
$('body').on('submit', function (e) {
  e.preventDefault()
  let data = $(this).serialize()
  //console.log(data);

  axios.post('/my/article/addcates', data).then((res) => {
    if (res.data.status !== 0) { return layer.msg(res.data.message) }
    layer.close(indexEditForm)
    //重新ajax获取数据
    getAddStr()
    //提示
    layer.msg('更新信息分类成功')

  })
})
//==========删除功能===============
$('#tbody').on('click', function () {
  let id = $(this).serialize()
  axios.get('/my/article/deletecate/' + id).then(({ data: { status, message } }) => {
    if (status !== 0) { return layer.msg(message) }
    layer.msg(message)
    getAddStr()
  })
})

